import { Button, Form, FormInstance, Input, Modal } from "antd"
import { CustomIcon } from "../../../components";
import styles from './index.module.less'
const AddModalFolder = ({addIsFolderOpen,
    onCancel,onOk}:{addIsFolderOpen:boolean;
        onCancel:({cancel}:{cancel: () =>void})=>void;
        onOk:({form}:{form:FormInstance<any>})=>void;}) => {
    const [form] = Form.useForm();
    const { TextArea } = Input;
    return <Modal className={styles.addFolderBox} title={'新建文件夹'} open={addIsFolderOpen} 
    onCancel={() => onCancel({cancel: form.resetFields})} 
    onOk={() => onOk({form})}
    footer={<Button type="primary" onClick={() => onOk({form})} >创建</Button>}>
        <span>基本信息</span>
        <Form form={form}>
            <Form.Item name={'folderName'} style={{margin: '12px 0px 22px'}} rules={[{ required: true, message: '请输入文件夹名称' }]} >
                <Input className={styles.inputValue} prefix={<CustomIcon style={{fontSize: 18}} str='folder-2-line' />} placeholder={'文件夹名称'} />
            </Form.Item>
            <Form.Item name={'folderDescribe'}>
                <TextArea className={styles.inputTextArea} placeholder={'文件夹描述（选填）'} />
            </Form.Item>
        </Form>
    </Modal>
}

export default AddModalFolder;